<template>
    <div id="banner">
      <!--动态将图片轮播图的容器高度设置成与图片一致-->
      <el-carousel height="450px" class="good" >
        <!--遍历图片地址,动态生成轮播图-->
        <el-carousel-item v-for="item in img_list" :key="item">
          <img :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
 
<script>
    export default {
        name: "Banner",
        data(){
          return{
            // 图片地址数组
            img_list:[
              "https://res-img.n.gongyibao.cn/uploads/a01358c5-befc-4f81-9c85-48b42fa78b35/20200730/dd67e4780e974847869e429e52df0e72.jpg",
              "https://res-img.n.gongyibao.cn/uploads/a01358c5-befc-4f81-9c85-48b42fa78b35/20200721/cb668a7dcc8c4ded899d334c1c4fe58e.jpg",
              "https://res-img.n.gongyibao.cn/uploads/a01358c5-befc-4f81-9c85-48b42fa78b35/20200713/fb234a00a0374e4088e2eb18b99a00b7.png",
              "https://res-img.n.gongyibao.cn/uploads/a01358c5-befc-4f81-9c85-48b42fa78b35/20200402/bc9cc030354847b1bb6e1a3d69cbc1df.jpg",
            ],
            // 图片父容器高度
            // bannerHeight :2000,
            // 浏览器宽度
            screenWidth :0,
          }
        },
        methods:{
        //   setSize:function () {
        //     // 通过浏览器宽度(图片宽度)计算高度
        //     this.bannerHeight = 400 / 1920 * this.screenWidth;
        //   },
        },
      mounted() {
          // 首次加载时,需要调用一次
          this.screenWidth =  window.innerWidth;
        //   this.setSize();
          // 窗口大小发生改变时,调用一次
          window.onresize = () =>{
          this.screenWidth =  window.innerWidth;
        //   this.setSize();
        }
      }
    }
</script>
 
<style scoped>
.good{
    margin-top: 0.2%;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
  }
 
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
 
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  img{
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
        display: block;
    max-width: 100%;
    height: 100%;
  }
</style>